<template>
  <div class="container">
    <!-- <baidu-map> </baidu-map> -->
    <!-- <baidu-map
      class="bm-view"
      :key="locationKey"
      :markerList="markerList"
      @onClickMarker="onClickMarker"
    >
    </baidu-map> -->
    <div class="content" style="box-shadow: 0px 0px 10px #000">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- <el-select
            style="width: 100%"
            :disabled="$route.query.code != 320500"
            v-model="query.parentCode"
            placeholder="请选择单位所属区域"
          >
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        > -->
        
        <el-select
           style="width: 100%"
            :disabled="$route.query.code != 320500"
                v-model="query.parentCode"
                placeholder="请选择单位所属区域"
              >
                <el-option
                  v-for="item in regionList"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
          
        
        
        
        
        </el-col>
        <el-col :span="9">
          <el-input
            style="width: 100%"
            maxlength="50"
            v-model="query.search"
            placeholder="请输入单位名称/信用代码/工作站名称"
          ></el-input
        ></el-col>

        <el-col :span="4">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="exportTable">导出</el-button>
        </el-col>
      </el-row>
      <div class="list_wapper">
        <el-empty description="暂无数据" v-if="!list.length"></el-empty>
        <div
          :key="item.identify"
          class="list"
          v-for="item in list"
          @click="workstation(item)"
        >
          <div class="row">
            <div class="name">
              {{ item.workStationName || "待完善" }}
              <span class="el-icon-edit" @click.stop="open(item)"></span>
              <span
                class="el-icon-delete"
                v-if="item.indexScore == 0"
                @click.stop="onDelete(item)"
              ></span>
            </div>
            <div
              class="score green"
              @click.stop="scoreHandle(item)"
              v-if="item.indexScore > 79"
            >
              {{ item.indexScore }}分
            </div>
            <div
              class="score yellow"
              @click.stop="scoreHandle(item)"
              v-else-if="item.indexScore > 59"
            >
              {{ item.indexScore }}分
            </div>
            <div class="score red" @click.stop="scoreHandle(item)" v-else>
              {{ item.indexScore }}分
            </div>
          </div>
          <div class="tag_wapper">
            <el-tag size="small" type="warning"
              >{{ item.districtName }}--{{ item.streetName }}</el-tag
            >
            <el-tag size="small">经营单位数{{ item.businessUnits }}家</el-tag>
            <el-tag size="small" v-if="$route.query.code == 320500"
              >全市第{{ item.cityRanking }}名</el-tag
            >
            <el-tag size="small" type="success" v-else
              >{{ item.districtName }}第{{ item.districtRanking }}名</el-tag
            >
            <!-- $route.query.code != 320500 -->
            <!-- cityRanking 市排名、区districtRanking -->
            <!-- <div class="green">综合得分{{ item.indexScore }}分</div> -->
            <!-- <el-tag size="small" type="success"
              >综合得分{{ item.indexScore }}分</el-tag
            > -->
          </div>

          <div class="row">
            <div>{{ item.identify }}</div>
            <div>{{ item.createDateTimeStr }}</div>
          </div>
          <div class="row">{{ item.unitName }}</div>
          <div class="row">{{ item.address }}</div>
        </div>
      </div>
      <rz-height></rz-height>

      <el-pagination
        class="right"
        v-show="list.length"
        @current-change="currentPage"
        small
        layout="total, prev,pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div style="width: 600px; height: 580px" class="map">
      <div
        class="region"
        v-for="(item, index) in markerList"
        :key="index"
        :class="[regionClass(item.areaName)]"
      >
        <div>
          <span style="font-size: 18px">{{ item.count }}</span> <span>家</span>
        </div>

        <div>{{ item.areaName }}</div>
      </div>
    </div>
    <!-- <div class="location" @click="location">
      <i class="el-icon-aim"></i>
    </div> -->
  </div>
</template>
<script>
// import BaiduMap from "@/views/home/map/components/qqMap";
import BaiduMap from "@/views/home/map/components/BaiduMap";
// import BaiduMap from "@/views/home/map/components/testMap";
import {
  UpdateWorkstation,
  deleteResponseById,
} from "@/api/modules/workstation";
export default {
  name: "maps",
  // props:[],
  // 页面加载
  created() {
    if (this.$route.query.code) {
      this.query.parentCode = this.$route.query.code;
    } else {
      this.query.parentCode = "320505000000";
    }
    this.findListByParentCode()
    this.getList();
    this.onSearch();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      locationKey: 0,
      query: {
        parentCode: "320505000000",
        search: "",
        pageIndex: 1,
        pageSize: 10,
      },
      regionList: [
        {
          value: "320500",
          label: "苏州市",
        },
        {
          value: "320506",
          label: "吴中区",
        },

        {
          value: "320507",
          label: "相城区",
        },
        {
          value: "320505",
          label: "高新区",
        },
        {
          value: "320508",
          label: "姑苏区",
        },
        {
          value: "320509",
          label: "工业园区",
        },
        {
          value: "320581",
          label: "常熟市",
        },
        {
          value: "320582",
          label: "张家港市",
        },
        {
          value: "320583",
          label: "昆山市",
        },
        {
          value: "320584",
          label: "吴江区",
        },
        {
          value: "320585",
          label: "太仓市",
        },
        {
          value: "320592",
          label: "张家港保税区",
        },
      ],
      markerList: [],
      list: [],
      total: 0,
      bodyindustryLIst: [
        {
          areaCode: "320505",
          areaName: "高新区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1846,
            cumulativeRegistrations: 7646,
          },
        },
        {
          areaCode: "320506",
          areaName: "吴中区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1890,
            cumulativeRegistrations: 7437,
          },
        },
        {
          areaCode: "320507",
          areaName: "相城区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1529,
            cumulativeRegistrations: 3946,
          },
        },
        {
          areaCode: "320508",
          areaName: "姑苏区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1803,
            cumulativeRegistrations: 5711,
          },
        },
        {
          areaCode: "320509",
          areaName: "工业园区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 2350,
            cumulativeRegistrations: 11097,
          },
        },
        {
          areaCode: "320581",
          areaName: "常熟市",
          quantityResponse: {
            cumulativeCompaniesRegistered: 2178,
            cumulativeRegistrations: 6598,
          },
        },
        {
          areaCode: "320582",
          areaName: "张家港市",
          quantityResponse: {
            cumulativeCompaniesRegistered: 2777,
            cumulativeRegistrations: 7689,
          },
        },
        {
          areaCode: "320583",
          areaName: "昆山市",
          quantityResponse: {
            cumulativeCompaniesRegistered: 3076,
            cumulativeRegistrations: 9210,
          },
        },
        {
          areaCode: "320584",
          areaName: "吴江区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1520,
            cumulativeRegistrations: 3965,
          },
        },
        {
          areaCode: "320585",
          areaName: "太仓市",
          quantityResponse: {
            cumulativeCompaniesRegistered: 1298,
            cumulativeRegistrations: 4657,
          },
        },
        {
          areaCode: "320592",
          areaName: "张家港保税区",
          quantityResponse: {
            cumulativeCompaniesRegistered: 42,
            cumulativeRegistrations: 269,
          },
        },
      ],
      classList: [
        {
          key: "高新区",
          value: "gaoxinqu",
        },
        {
          key: "吴中区",
          value: "wuzhongqu",
        },
        {
          key: "相城区",
          value: "xiangcehngqu",
        },
        {
          key: "姑苏区",
          value: "gusuqu",
        },
        {
          key: "工业园区",
          value: "gongyeyuan",
        },
        {
          key: "常熟市",
          value: "changshu",
        },
        {
          key: "张家港市",
          value: "zhangjiagang",
        },
        {
          key: "昆山市",
          value: "kunshan",
        },
        {
          key: "吴江区",
          value: "wujiang",
        },
        {
          key: "太仓市",
          value: "taicang",
        },
        {
          key: "保税区",
          value: "zhangjiagangbaoshui",
        },
      ],
    };
  },
  // 方法
  methods: {
       findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.parentCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
    getList() {
      this.$http
        .findWorkNumberOfAreas({
          parentCode: this.query.parentCode,
          search: "",
          pageIndex: 0,
          pageSize: 0,
        })
        .then((res) => {
          // res.data.list.forEach((x) => {
          //   x.show = false;
          // });
          if(this.query.parentCode == "320500"){
            this.markerList = res.data;
          }else{
             this.markerList = res.data.filter(x=>x.areaCode==this.query.parentCode);
          }
          
        });
    },
    location() {
      this.locationKey++;
    },
    onClickMarker(e) {
      this.markerList.forEach((x) => {
        if (x.identify == e) {
          x.show = !x.show;
        }
      });
    },
    onSearch() {
      this.$http.findWorkstationMapList(this.query).then((res) => {
        // console.log(res);
        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    currentPage(e) {
      this.query.pageIndex = e;
      this.onSearch();
    },
    exportTable() {
      if (this.list.length == 0) return this.$error("暂无数据");
      let { VUE_APP_ADMIN_API } = process.env;
      this.$downloadFiles(
        `${VUE_APP_ADMIN_API}/food/safety/workstation/exportQueryWorkstationMap?parentCode=${this.query.parentCode}&search=${this.query.search}`
      );
    },
    workstation(e) {
      if (e.contactTel) {
        sessionStorage.setItem("workId", e.workId);
        this.$router.push(`/workstation?url=/map`);
      }
    },
    scoreHandle(e) {
      if (e.contactTel) {
        sessionStorage.setItem("workId", e.workId);
        this.$router.push(`/workstationScore`);
      }
    },
    regionClass(params) {
      return this.classList.filter(x => x.key == params)[0].value;
    },

    open(e) {
      console.log(e);
      this.$prompt("请输入工作站名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputValue: e.workStationName,
        inputErrorMessage: "请输入工作站名称",
      }).then(({ value }) => {
        UpdateWorkstation({
          workStationName: value,
          workId: e.workId,
        }).then((res) => {
          this.$success(res.msg);
          this.onSearch();
        });
      });
    },
    onDelete(e) {
      this.$confirm("确定删除这个工作站吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteResponseById({
          id: e.workId,
          remark: "",
          unitName: e.unitName,
          updateName: sessionStorage.getItem("logname"),
          updateDepartment: sessionStorage.getItem("unitName"),
        }).then((res) => {
          this.$success(res.msg);
          this.onSearch();
        });
      });
      // ;workstationDeleteResponseById
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    BaiduMap: BaiduMap,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  padding: 60px 120px 30px 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  background: #fdfdfd;
  .content {
    position: absolute;
    left: 2%;
    top: 2%;
    background-color: #fff;
    padding: 10px;
    width: 550px;
    z-index: 1000;
  }
  .location {
    // box-shadow: 0px 0px 10px #000;
    position: absolute;
    right: 2%;
    bottom: 5%;
    padding: 5px;
    z-index: 1000;
    cursor: pointer;
    .el-icon-aim {
      font-size: 25px;
    }
  }
  .list_wapper {
    max-height: 600px;
    overflow-y: auto;
    .list {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      .row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        align-items: center;
        font-size: 14px;
        .left {
          display: flex;
          align-items: center;
        }
        .name {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }
        .score {
          text-decoration: underline;
          font-weight: bold;
          font-size: 16px;
          cursor: pointer;
        }
        .el-icon-edit {
          color: #1890ff;
        }
        .el-icon-delete {
          color: red;
          margin-left: 10px;
        }
      }

      .tag_wapper {
        display: flex;
        align-items: center;
        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
}

.map {
  position: relative;
  background: url("../../../assets/images/maps.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  .switch {
    position: absolute;
    left: 0;
    top: 5%;
  }
  .region {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    color: #fff;
    position: absolute;
    color: #000;
    font-weight: 700;
    width: 100px;
    height: 70px;
    background: url("../../../assets/images/mapPotion.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    font-size: 14px;
  }
  .zhangjiagang {
    top: 11px;
    left: 215px;
  }
  .changshu {
    top: 117px;
    left: 314px;
  }
  .taicang {
    top: 161px;
    left: 463px;
  }
  .xiangcehngqu {
    top: 216px;
    left: 245px;
  }
  .kunshan {
    top: 261px;
    left: 383px;
  }
  .gongyeyuan {
    top: 263px;
    left: 295px;
  }
  .gusuqu {
    top: 270px;
    left: 227px;
  }
  .gaoxinqu {
    top: 252px;
    left: 156px;
  }
  .wuzhongqu {
    top: 344px;
    left: 110px;
  }
  .wujiang {
    top: 403px;
    left: 245px;
  }
  .zhangjiagangbaoshui {
    top: 9px;
    left: 310px;
  }
}
</style>